<script setup>
import {get, post, deleted} from '@/utils/request';
import service from '@/utils/request'

import {ref, reactive} from "vue";
import {useRouter} from 'vue-router'
import {showNotify, showToast} from 'vant';

import * as echarts from "echarts";

let shuatidata = reactive({
  datas: []
})
get('/api/timu/list').then(res => {
  for (const re of res.data) {
    shuatidata.datas.push(re)

  }
})

let showDaan = ref(false)
const submit = () => {

  let errorCount = 0;

  for (const data of shuatidata.datas) {
    if (data.timutype === '判断题') {
      data.success = data.daan === data.userCheck
      if (!data.success) errorCount++;
    }
    if (data.timutype === '单选题') {
      data.success = data.daan === data.userCheck
    }
    if (data.timutype === '多选题') {
      let daans = data.daan.split("~");
      data.userCheck?.sort();
      data.success = daans.join() === data.userCheck?.join()
    }
    if (data.timutype === '填空题') {
      data.success = true;
    } else {
      if (!data.success) errorCount++;
    }
  }

  showToast('错误题目个数' + errorCount);

  showDaan.value = true;

}

const loading = ref(false);
const onRefresh = () => {


  get('/api/timu/list').then(res => {
    shuatidata.datas = []
    for (const re of res.data) {
      shuatidata.datas.push(re)
    }
    loading.value = false;
  })

};
</script>

<template>
  <div id="index">
    <h1 style="text-align: center;">秦子期刷题</h1>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">

      <div
          class="card"
          v-for="(item ,index) in shuatidata.datas"
      >
        {{ index + 1 }}: {{ item.timutype }}
        <br/>
        {{ item.tigan }} &nbsp;
        <span v-if="showDaan" :class="item.success?'success':'red'">
        答案:
        <span v-if="item.timutype!=='填空题'">
          ( <span v-if="item.daan==='T'">√</span>
      <span v-else-if="item.daan==='F'">x</span>  <span v-else>{{ item.daan }}</span> )
        </span>
        <span v-else>
             {{ item.selecta }}
             {{ item.selectb }}
             {{ item.selectc }}
             {{ item.selectd }}
        </span>


      </span>
        <br/>
        <div v-if="item.timutype==='判断题'">
          <van-radio-group v-model="item.userCheck" shape="square">
            <van-radio name="T">正确</van-radio>
            <van-radio name="F">错误</van-radio>
          </van-radio-group>
        </div>

        <div v-if="item.timutype==='单选题'">
          <van-radio-group v-model="item.userCheck" shape="square">
            <van-radio v-if="item.selecta!=''" name="A">A: {{ item.selecta }}</van-radio>
            <van-radio v-if="item.selectb!=''" name="B">B: {{ item.selectb }}</van-radio>
            <van-radio v-if="item.selectc!=''" name="C">C: {{ item.selectc }}</van-radio>
            <van-radio v-if="item.selectd!=''" name="D">D: {{ item.selectd }}</van-radio>
            <van-radio v-if="item.selecte!=''" name="E">E: {{ item.selecte }}</van-radio>
            <van-radio v-if="item.selectf!=''" name="F">F: {{ item.selectf }}</van-radio>
            <van-radio v-if="item.selectg!=''" name="G">G: {{ item.selectg }}</van-radio>
            <van-radio v-if="item.selecth!=''" name="H">H: {{ item.selecth }}</van-radio>
            <van-radio v-if="item.selecti!=''" name="I">I: {{ item.selecti }}</van-radio>
            <van-radio v-if="item.selectj!=''" name="J">J: {{ item.selectj }}</van-radio>
          </van-radio-group>
        </div>

        <div v-if="item.timutype==='多选题'">
          <van-checkbox-group v-model="item.userCheck" shape="square">
            <van-checkbox v-if="item.selecta!=''" name="A">A: {{ item.selecta }}</van-checkbox>
            <van-checkbox v-if="item.selectb!=''" name="B">B: {{ item.selectb }}</van-checkbox>
            <van-checkbox v-if="item.selectc!=''" name="C">C: {{ item.selectc }}</van-checkbox>
            <van-checkbox v-if="item.selectd!=''" name="D">D: {{ item.selectd }}</van-checkbox>
            <van-checkbox v-if="item.selecte!=''" name="E">E: {{ item.selecte }}</van-checkbox>
            <van-checkbox v-if="item.selectf!=''" name="F">F: {{ item.selectf }}</van-checkbox>
            <van-checkbox v-if="item.selectg!=''" name="G">G: {{ item.selectg }}</van-checkbox>
            <van-checkbox v-if="item.selecth!=''" name="H">H: {{ item.selecth }}</van-checkbox>
            <van-checkbox v-if="item.selecti!=''" name="I">I: {{ item.selecti }}</van-checkbox>
            <van-checkbox v-if="item.selectj!=''" name="J">J: {{ item.selectj }}</van-checkbox>
          </van-checkbox-group>
        </div>

        <div v-if="item.timutype==='填空题'">
          <van-field
              v-model="item.userCheck"
              rows="3"
              autosize
              type="textarea"
              placeholder="填空"
          />
        </div>

      </div>
    </van-pull-refresh>
    <div>
      <van-button type="primary" @click="submit" block>提交</van-button>
    </div>
    <van-back-top/>
  </div>
</template>

<style scoped>
.card {
  background-color: rgb(199,237,204);
  margin-bottom: 3vh;
}

.red {
  color: red;
}

.success {
  color: #07c160;
}

#index{
  background-color: rgb(195,230,200);
}

</style>